<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            
            /* form style */ #myform {
                background: #333 url(/media/img/gradient/h300.png) repeat-x;
                padding: 15px 20px;
                color: #eee;
                width: 400px;
                margin: 0 auto;
                position: relative;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
            }
            
            /* nested fieldset */ #myform fieldset {
                border: 0;
                margin: 0;
                padding: 0;
                background: #333333 url(/media/img/logo-medium.png) no-repeat scroll 215px 40px;
            }
            
            /* typography */ #myform h3 {
                color: #eee;
                margin-top: 0px;
            } #myform p {
                font-size: 11px;
            }
            
            /* input field */ #myform input {
                border: 1px solid #444;
                background-color: #666;
                padding: 5px;
                color: #ddd;
                font-size: 12px;
                /* CSS3 spicing */
                text-shadow: 1px 1px 1px #000;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
            } #myform input:focus {
                color: #fff;
                background-color: #777;
            } #myform input:active {
                background-color: #888;
            }
            
            /* button */ #myform button {
                outline: 0;
                border: 1px solid #666;
            }
            
            /* error message */ .error {
                height: 15px;
                background-color: #FFFE36;
                font-size: 11px;
                border: 1px solid #E1E16D;
                padding: 4px 10px;
                color: #000;
                display: none;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius-bottomleft: 0;
                -moz-border-radius-topleft: 0;
                -webkit-border-bottom-left-radius: 0;
                -webkit-border-top-left-radius: 0;
                -moz-box-shadow: 0 0 6px #ddd;
                -webkit-box-shadow: 0 0 6px #ddd;
            } .error p {
                margin: 0;
            }
            
            /* field label */
            label {
                display: block;
                font-size: 11px;
                color: #ccc;
            } #terms label {
                float: left;
            } #terms input {
                margin: 0 5px;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <form id="myform">
            <fieldset>
                <h3>Sample registration form</h3>
                <p>
                    Enter bad values and then press the submit button. 
                </p>
                <p>
                    <label>
                        email *
                    </label>
                    <input type="email" name="email" required="required" />
                </p>
                <p>
                    <label>
                        website *
                    </label>
                    <input type="url" name="url" required="required" />
                </p>
                <p>
                    <label>
                        name *
                    </label>
                    <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" />
                </p>
                <p>
                    <label>
                        age
                    </label>
                    <input type="number" name="age" size="4" min="5" max="50" />
                </p>
                <p id="terms">
                    <label>
                        I accept the terms
                    </label>
                    <input type="checkbox" required="required" />
                </p>
                <button type="submit">
                    Submit form
                </button>
                <button type="reset">
                    Reset
                </button>
            </fieldset>
        </form>
        <!-- tab panes -->
        <script type="text/javascript">
            // initialize validator and add a custom form submission logic
            $("#myform").validator().submit(function(e){
            
                var form = $(this);
                
                // client-side validation OK.
                if (!e.isDefaultPrevented()) {
                
                    // submit with AJAX
                    $.getJSON("server-fail.js?" + form.serialize(), function(json){
                    
                        // everything is ok. (server returned true)
                        if (json === true) {
                            form.load("success.php");
                            
                            // server-side validation failed. use invalidate() to show errors
                        }
                        else {
                            form.data("validator").invalidate(json);
                        }
                    });
                    
                    // prevent default form submission logic
                    e.preventDefault();
                }
            });
        </script>
    </body>
</html>
